<template>
<div>
   <div class="whitesmoke">
      <input type="text" placeholder="会员姓名/手机号/扫描会员" id="input" v-model="memberName2">
      <el-select v-model="value" placeholder="请选择" id="select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-button type="primary" id="but111" @click="findvip1">搜索</el-button>
  <el-button type="primary" plain id="but2" @click="dialogFormVisible = true">新增会员</el-button>
  <el-button type="primary" plain id="but3">贴标签</el-button>
   </div>
   <el-row>
  <el-col :span="8" v-for="item in firstHalf" :key="item.id"  >
    <el-card :body-style="{ padding: '0px' }" shadow="hover">
      <img src="../../images/home-cz/activehome.png" class="image">
       <div class="div1"><span>{{item.memberName}}</span><span>{{item.memberPhoneNumber}}</span><input type="checkbox" class="way"></div>
       
       <div id="vip">{{item.memberVipLevelId}}</div>
       <div class="title">
        <div id="div2" v-for="(itemm,index) in item.labels" :key="index">{{itemm}}</div>
       
       </div>
       <div class="bott">
          <div :class="{yo1:item.flag==2}"  class="runaway" @click="open(item.memberId,item.memberIdCard,item.memberName)">挂失</div>
            <div :class="{yo1:item.flag==1}"  class="runaway" @click="open1(item.memberId,item.memberIdCard,item.memberName)">解挂</div>
             <div class="yo1">补办</div>
              <div class="yo1" @click="viplist(item)" type="primary" style="margin-left: 16px;">详情</div>
       </div>
       
     
    </el-card>
  </el-col>
  
</el-row>
<el-row>
  <el-col :span="8" v-for="item in secondHalf" :key="item.id"  >
    <el-card :body-style="{ padding: '0px' }" shadow="hover">
      <img src="../../images/home-cz/activehome.png" class="image">
       <div class="div1"><span>{{item.memberName}}</span><span>{{item.memberPhoneNumber}}</span><input type="checkbox" class="way"></div>
       
       <div id="vip">{{item.memberVipLevelId}}</div>
       <div class="title">
         <div id="div2" v-for="(itemm,index) in item.labels" :key="index">{{itemm}}</div>
       </div>
       <div class="bott">
           <div :class="{yo1:item.flag==2}"  class="runaway" @click="open(item.memberId,item.memberIdCard,item.memberName)">挂失</div>
            <div :class="{yo1:item.flag==1}"  class="runaway" @click="open1(item.memberId,item.memberIdCard,item.memberName)">解挂</div>
             <div class="yo1">补办</div>
              <div class="yo1 yo2" @click="viplist(item)" type="primary" style="margin-left: 16px;">详情</div>
       </div>
       
     
    </el-card>
  </el-col>
  
</el-row>
<div class="block">
   
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  <el-dialog  :visible.sync="dialogFormVisible">
  <el-form :model="member">
    <el-form-item label="会员卡号" :label-width="formLabelWidth">
      <el-input v-model="member.idCard" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="会员姓名" :label-width="formLabelWidth">
      <el-input v-model="member.memberName" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="会员手机" :label-width="formLabelWidth">
      <el-input v-model="member.phoneNumber" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="会员级别" :label-width="formLabelWidth">
         <el-radio-group v-model="member.vipLevelId">
     <el-radio :label="1">普通会员</el-radio>
    <el-radio :label="2">黄金会员</el-radio>
    <el-radio :label="3">钻石会员</el-radio>
    </el-radio-group>
    </el-form-item>
 <el-form-item label="会员性别" :label-width="formLabelWidth">
         <el-radio-group v-model="member.gender">
     <el-radio :label="1">男</el-radio>
    <el-radio :label="2">女</el-radio>
    
    </el-radio-group>
    </el-form-item>
     <el-form-item label="会员生日" :label-width="formLabelWidth">
         <input type="date" v-model="member.birthday">
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </div>
</el-dialog>
<el-drawer
  title="我是标题"
  :visible.sync="drawer"
  :with-header="false"
  size="60%">
  <div class="need">
 <div class="img1"><img src="../../images/home-cz/logo.png"></div>
 <div id="setp1"> <span class="po">{{ppname}}</span><span class="po1">{{ppnum}}</span> <span id="setp">{{pplevel}}</span></div>
  </div>
 <el-button type="primary" plain >会员解挂</el-button>
 <el-button type="primary" plain>会员解挂</el-button>
 <el-button type="primary" plain>会员解挂</el-button>
 <el-button type="primary" plain>会员解挂</el-button>
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item @click="pushkid" > 基本信息</el-menu-item>
  <el-menu-item @click="pushkid2">消费信息</el-menu-item>
   <div>
  <router-view/>
   </div>

</el-menu>
<div class="line"></div>
</el-drawer>
</div>

</template>

<script>
 import {createNamespacedHelpers} from 'vuex'
 const {mapActions,mapState,mapMutations} = createNamespacedHelpers('vips')
export default {
 data() {
    return {
      bg:'',
      mylevel:'',
     memberName2:'',
      searchtype:{
        memberName: "",
			memberPhoneNumber: "",
      },
        menudata:[
              {name:'基本信息',index:'vipmessage'},
              {name:'消费信息',index:'vippay'}
        ],
         activeIndex: '1',
         drawer: false,
       dialogTableVisible: false,
        dialogFormVisible: false,
        formLabelWidth: '120px',
        member: {
          memberName: '',
          vipLevelId:'',
          phoneNumber:'',
         idCard:'',
          gender:'',
          birthday:''


        },
        radio:'',
      input: '',
      options: [{
          value: '选项1',
          label: '正在使用中'
        }, {
          value: '选项2',
          label: '挂失中'
        }, ],
        value: '',
        currentPage4: 1,
        ppname:'',
        ppnum:'',
        pplevel:'',
        mydata:[]
    }
 },
       mounted() {
          this.getvips()
       },
      methods: {
            pushkid(){
              console.log(this.mydata);
              let mydata1 = JSON.stringify(this.mydata)
              console.log(mydata1);
         this.$router.replace({
          path: `/home/vip/vipmessage/${mydata1}`,
        });
            },
            pushkid2(){
this.$router.replace({
          path: `/home/vip/vippay`,
        })
            },
             findvip1(){
               if(this.memberName2 - 0){
                   this.searchtype.memberPhoneNumber = this.memberName2
               }else if(this.memberName2){
                 this.searchtype.memberName = this.memberName2
               }else{
                 this.searchtype.memberName = ''
                 this.searchtype.memberPhoneNumber = ''
               }
               this.findvip(this.searchtype);
               this.getvips()
             },
            ...mapActions(['addviper','getvips','getguashi']),
            ...mapMutations(['setpagesize','setcurrentpage','findvip']),
          add(){
              this.addviper(this.member)
              this.getvips()
              console.log(1);
// this.dialogFormVisible = false
          },
           handleSelect(key, keyPath) {
        
        
       
            this.$router.push(keyPath[0])
      
        
      },
      handleSizeChange(val) {
       this.setpagesize(val)
       this.getvips()
      },
      handleCurrentChange(val) {
        this.setcurrentpage(val)
          this.getvips()
      },
      open(data,data1,data2) {
        this.bg = 'red'
         console.log(data,data1,data2
         );
          this.getguashi({id:data,
          flag:1})
          console.log(data);
        this.$confirm('是否确认挂失会员卡?' ,'会员卡号:'+ data1,'名字：'+ data2, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '挂失成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
         this.getvips()
      },
       open1(data,data1,data2) {
         console.log(data,data1,data2
         );
          this.getguashi({id:data,
          flag:2})
          console.log(data);
        this.$confirm('是否确认挂失会员卡?' ,'会员卡号:'+ data1,'名字：'+ data2, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '挂失成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
         this.getvips()
      },
      viplist(data){
            this.mydata = data
         this.ppname = data.memberName
         this.ppnum = data.memberPhoneNumber
        
         this.pplevel = data.memberVipLevelId
        console.log(data);
        this.drawer = true;
        
      }
    },
    computed:{
      ...mapState(['total','page','viprender','firstHalf','secondHalf','memberName1'])
    },
    watch:{
        drawer:{
          handler(q,w){
            console.log(q,w);
            if(!q){
              this.$router.push('/home/vip')
            }
          }
        }
    }

}
</script>

<style lang="scss"  >
.runaway{
  width:90px;
    height:25px;
    background-color: gray;
    color:white;
    line-height: 15px;
    margin-left:6px;
    font-size:0.1px;
  text-align: center;
}
.active{
  background: #000;
}
.yo2{
  margin-left:-5px;
}
.po1{
    position: absolute;
    top:20px;
    left:330px
}
.po{
    position: absolute;
    top:20px;
}
#setp1 {
    height:50px;
}
#setp{
    position: absolute;
    top:40px;
}
.need{
    display:flex;
    width:50%;
height:100px;
margin:0 auto;
margin-top:30px;
}
.img1{
    img{
 border-radius: 100px;
 width:100px;
 height:100px;
    }
   
}
.el-col-offset-2{
margin-left:3.333%
}
#vip{
    margin-top:10px;
    font-size:1px;
    padding-bottom: 20px;
    
}
.block{
    margin-top:100px;
    position: absolute;
    left:250px;
}

.bott{
    margin-top:10px;;
   display:flex;
    
    justify-content: space-between;
    flex-wrap: wrap;
}
.yo1{
    
    width:90px;
    height:25px;
    background-color: #EDB17A;
    color:white;
    line-height: 15px;
    margin-left:6px;
    font-size:0.1px;
  text-align: center;
}
.title{
    display: flex;
      flex-wrap: wrap;
   
}
#div2{
    font-size:2px;
    border:1px solid #3C98FC;
    // margin-top:-130px;
    width:60px;
    height:10px;
    border-radius: 25px;
    line-height: 10px;
    color:#3C98FC;
     margin-left:5px;
}
.div1{
    font-size: 5px;
    // margin-top:-60px;
    margin-left:50px;
    span{
        
         font-size: 6px;
    }
    .way{
        border-radius: 50px;
        width:15px;
        height:15px;
        background: gray;
        margin-left:40px;
    }
}
.el-row{
    margin-top:60px;
    margin-left:20px;
    display: flex;
    
 
    top:50px;
}

.el-card{
    width:220px;
    height:140px;
    margin-left:25px;
    img{
        border-radius: 50px;
        width:40px;
        height:40px;
       float: left;
       margin-top:10px;
     margin-left:10px;
    }
}
.el-button--primary{
      background-color: linear-gradient(to right, #80DAFB, #2889FF);
}
#but3{
      background-color: linear-gradient(to right, #80DAFB, #2889FF);
    width:80px;
    height:22px;
 right:20px;
   position:absolute;
    line-height:0px;
    background: white;
}
#but2{
      background-color: white;
    width:80px;
    height:22px;
 right:100px;
 margin-left:50px;
    line-height:0px;
    text-align: center;
    padding-left:12px
}
#but111{
    background-color: linear-gradient(to right, #80DAFB, #2889FF);
    width:80px;
    height:22px;
 margin-left:650px;
 line-height:0px;
  
    
}
.el-scrollbar{
     position: absolute;
           left:330px;
}
   #select{
width:260px;
             height:22px;
             margin-left:-30px;
           position: absolute;
           left:380px;
               background: #EEEEEE;
               border-radius: none;
   }
       *{
           margin:0;
           padding:0;
       }
       .whitesmoke{
           width:100%;
           height:39px;
          
           background-color: white;
           top:120px;
           padding-top:20px;
           display: flex;
           position: absolute;
           
       }
     #input{
              font-size: 1px;
              background: #EEEEEE;
             width:300px;
             height:22px;
             position: absolute;
             top:20px;
             left:20px;
              border:1px solid #F9F9F9;
              
     }
   .el-main{
  padding:0px;
   }
</style>